<template>
  <div class="my-vip" ref="myVip">
    <loading-svg v-if="isShowLoading"/>
    <div  v-else>
      <van-nav-bar
        title="绿卡"
        :border=false
        @click-left="onClickLeft"
        left-arrow
        :fixed="true"
        style="height:44px"
      />
      <vip-menu-title-scroll
        ref="tabFixed"
        class="tab-control"
        v-show="isShowTab"
        :menuTitlesArray="cate"
        @menutitle-click="menuTitleClick"
      />
      <scroll ref="wrap"
              class="wrap"
              :probeType="3"
              :listenScroll="true"
              :scrollY="true"
              @scroll="scrollTop"
      >
        <div class="wrap-content">
          <div class="vip-header">
            <img src="../../../assets/img/mine/vip.png"  @load="imgLoad" alt="">
          </div>
          <div class="vip-privilege">
            <p class="title">绿卡特权</p>
            <van-grid :border=false>
              <van-grid-item icon="vip-card-o"
                            text="专享券" />
              <van-grid-item icon="discount"
                            text="专享特价" />
              <van-grid-item icon="gem-o"
                            text="2倍积分" />
              <van-grid-item icon="more-o"
                            text="更多特权" />
            </van-grid>
            <div class="open-vip" @click="goToPayPage">
              <span>5折开通绿卡</span>
            </div>
          </div>
          <!-- 第一部分 -->
          <div class="coupons">
            <span class="number">1</span>
            <span class="desc">绿卡专享券 天天领取优惠</span>
            <p class="today-couns">今日专享券<i>每天0点更新</i></p>
            <div class="ticket-wrap">
              <div class="ticket"
                  v-for="item in todayTicket"
                  :key="item.id"
                  @click="getCoupons"
              >
                <div class="money"><i>¥</i><span>{{item.money}}</span></div>
                <div class="coupons-conditions">满{{item.pay_min}}元使用</div>
                <div class="coupons-scope">{{item.description}}</div>
                <div class="get-coupons">立即领取</div>
              </div>
            </div>
            <!--本周专享券-->
            <p class="today-couns">本周专享券</p>
              <div class="ticket-wrap">
                <div class="ticket"
                    v-for="item in weekTicket"
                    :key="item.id"
                >
                  <div class="money"><i>¥</i><span>{{item.money}}</span></div>
                  <div class="coupons-conditions">满{{item.pay_min}}元使用</div>
                  <div class="coupons-scope">{{item.description}}</div>
                  <div class="get-coupons">立即领取</div>
              </div>
            </div>
          </div>
          <!-- 第二部分 -->
          <div class="coupons">
            <span class="number">2</span>
            <span class="desc">绿卡专享特价</span>
            <!-- <div ref="tab"> -->
              <vip-menu-title-scroll ref="tab" :menuTitlesArray="cate" @menutitle-click="menuTitleClick" />
            <!-- </div> -->
            <!-- vip商品列表 -->
            <vip-goods-items :vipCateDetail="cateDetail" />
          </div>

        </div>
      </scroll>
    <!-- 底部按钮 -->
      <transition name="fade">
        <div
          class="bottom-join-vip"
          transition="fade"
          v-show="isShowBottomBtn"
        >
          <div class="bottom-desc">
            <span class="year-card">年卡</span>
            <i>88元</i>
            <span class="origin-price">180元</span>
          </div>
          <div class="join-vip" @click="goToPayPage">开通绿卡</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
// import Scroll from '@/components/common/scroll/Scroll'
import { getVipContent } from '@/network/home'
// import LoadingSvg from '@/components/common/loading/LoadingSvg'
import VipGoodsItems from './myVipChildren/VipGoodsItems'
import VipMenuTitleScroll from './myVipChildren/VipMenuTitleScroll'

export default {
  name: 'MyVip',
  data () {
    return {
      todayTicket: [],
      weekTicket: [],
      cate: [],
      cateDetail: [],
      // currentTitle: 0,
      isShowBottomBtn: false,
      isShowLoading: true,
      isShowTab: false,
      tabOffsetTop: 0
    }
  },
  components: {
    VipGoodsItems,
    VipMenuTitleScroll
    // LoadingSvg,
    // Scroll
  },
  mounted () {
    this._initData()
  },
  updated () {
    // 有个坑，因为数据数存在v-else里的，即loading为false时才显示，所以在mounted里获取不到$refs, 为undefined
    this.tabOffsetTop = this.$refs.tab.$el.offsetTop
    console.log(this.tabOffsetTop)
  },
  methods: {
     async _initData () {
       let res = await getVipContent()
       if (res.success) {
         console.log(res.data)
         this.todayTicket = res.data.today_ticket.tickets
         this.weekTicket = res.data.week_ticket.tickets
         this.cate = res.data.cate
         this.cateDetail = res.data.cate_detail
         this.isShowLoading = false
       }
    },
    imgLoad () {
      if (!this.flag) {
        this.$refs.wrap.refresh()
        this.flag = true
      }
    },
    onClickLeft () {
      this.$router.back()
    },
    scrollTop (pos) {
      Math.abs(pos.y) > 500 ? this.isShowBottomBtn = true : this.isShowBottomBtn = false
      Math.abs(pos.y) > this.tabOffsetTop ? this.isShowTab = true : this.isShowTab = false
    },
    goToPayPage () {
      this.$router.push({ path:'/vipPay' })
    },
    getCoupons () {

    },
    menuTitleClick (index) {
      this.$refs.tab.currentSubTitle = index
      this.$refs.tabFixed.currentSubTitle = index
    }
  }
}

</script>
<style lang='scss' scoped>
.my-vip {
  @include setAllcover(100);
  background-color: #f5f5f5;
  overflow: hidden;
  .van-nav-bar {
    background-color: #303747;
    font-size: px2rem(10);
  }
  .van-nav-bar /deep/ .van-nav-bar__title,
  .van-nav-bar /deep/ .van-icon {
   color: #fff;
  }
  .tab-control {
    position: relative;
    z-index: 9;
    margin-top: px2rem(44);
  }
  .wrap {
    height: calc(100vh - 44px - 88px);
  }
  .vip-header {
    @include setWH(100%, px2rem(175));
    margin-top: px2rem(41);
    img {
      @include setWH(100%, 100%);
    }
  }
  .vip-privilege {
    background-color: $text-color-white;
    padding-top: px2rem(17.5);
    padding-bottom: px2rem(10);
    .title {
      padding-left: px2rem(17.5);
      @include setFontColor( px2rem(17.5), #000);
      font-weight: bolder;
    }
    .open-vip {
      @include setWH(60%, px2rem(44));
      line-height: px2rem(44);
      margin-top: px2rem(8);
      background-color: #303747;
      text-align: center;
      border-radius: px2rem(35);
      margin: 0 auto;
      @include setFontColor(px2rem(16), $theme-clor-green);
      font-weight: bold;
    }
  }
  .coupons {
    width: 100%;
    margin-top: px2rem(17.5);
    background-color: $text-color-white;
    padding-left: px2rem(17.5);
    padding-top: px2rem(17.5);
    padding-bottom: px2rem(17.5);
    .number {
      @include setWH(px2rem(17.5), px2rem(17.5));
      line-height: px2rem(17.5);
      background-color: $theme-clor-green;
      color: $text-color-white;
      padding: 0 px2rem(5);
      border-radius: px2rem(2);
    }
    .desc {
      @include setFontColor(px2rem(17.5), $text-color-black);
      padding-left: px2rem(9);
      font-weight: bolder;
    }
    .today-couns {
      padding-top: px2rem(17.5);
      font-size: px2rem(12);
      i {
        padding-left: px2rem(7);
        color: grey;
      }
    }
    .ticket-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .ticket {
        @include setWH(45%, px2rem(80));
        padding-left: px2rem(11);
        position: relative;
        margin-top: px2rem(8);
        margin-right: 5%;
        border-left: px2rem(2) dashed $theme-clor-green;
        border-top: 1px solid $theme-clor-green;
        border-bottom: 1px solid $theme-clor-green;
        border-radius: 0 px2rem(2) px2rem(2) 0;
        .money {
          color: $theme-clor-green;
          span {
            font-size: px2rem(35);
          }
        }
        .coupons-conditions {
          @include setFontColor(px2rem(12), #565656);
        }
        .coupons-scope {
          width: 90%;
          padding-top: px2rem(3);
          @include setFontColor(px2rem(12), $theme-clor-green);
          @include text-ellipsis;
        }
        .get-coupons {
          position: absolute;
          top: -1px;
          right: 0;
          @include setWH(px2rem(25), px2rem(80));
          line-height: px2rem(27);
          @include setFontColor(px2rem(12), $text-color-white);
          background-color: $theme-clor-green;
          text-align: center;
          border-radius: 0 px2rem(2) px2rem(2) 0;
          writing-mode: vertical-rl;
        }
      }
    }
  }
  .bottom-join-vip {
    position: fixed;
    display: flex;
    bottom: px2rem(10);
    @include setWH(90%, #5fa85f);
    left: 5%;
    right: 5%;
    z-index: 999;
    border-radius: px2rem(26);
    .bottom-desc {
      @include setWH(70%, px2rem(44));
      line-height: px2rem(44);
      background-color: #303747;
      border-radius: px2rem(26) 0 0 px2rem(26);
      justify-content: flex-start;
      padding-left:px2rem(17.5);
      @include setFontColor(px2rem(14), #fff);
      i {
        padding-left: px2rem(3);
        padding-right: px2rem(3);
        color: #f2525a;
      }
      .origin-price {
        font-size: px2rem(10);
        text-decoration: line-through;
      }
    }
    .join-vip {
      text-align: center;
      @include setWH(30%, px2rem(44));
      line-height: px2rem(44);
      background-color: #3cb963;
      border-radius: 0 px2rem(26) px2rem(26) 0;
      @include setFontColor(px2rem(14), #fff);
    }
  }
}
</style>
